<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		#chart {
			width: 1500px;
			height: 1000px;
		}
	</style>
	<script src="js/echarts.js"></script>
</head>

<body>
	<div id="chart"></div>
	<button>点击</button>
	<script>
		var mychart = echarts.init(document.getElementById('chart'));

		mychart.setOption({
			color: ['#8EC9EB'],
			legend: {},
			tooltip: {
				trigger: 'axis',
				formatter: 'formatter: "Temperature : <br/>{b}km : {c}°C"'
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				axisLabel: {
					formatter: '{value} °C'
				},
				splitLine: {
					show: false,
				}
			},
			yAxis: {
				data: ['0', '10', '20', '30', '40', '50', '60', '70', '80'],
				axisLabel: {
					formatter: '{value} km'
				},
				axisLine: {
					onZero: false,
				}
			},
			series: {
				name: '高度(km)与气温(°C)变化关系',
				type: 'bar',
				data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
			},
			graphic: [
				{
					type: 'image',
					id: 'favicon',
					position: [0, 0],
					//rotation: Math.PI / 180 * 90,	//Math.PI / 180 是把角度转成弧度
					origin: [75, 75],
					scale: [1, 1],
					left: 1250,
					//top:200,
					info: 'Hello Kaivon!',
					silent: false,
					invisible: false,
					ignore: false,
					cursor: 'crosshair',
					draggable: true,

					style: {
						image: 'http://echarts.baidu.com/images/favicon.png',
						width: 150,
						height: 150,
						x: 200,
						y: 200,
						fill: 'blue',

						shadowBlur: 10,
						shadowOffsetX: 10,
						shadowOffsetY: 10,
						shadowColor: '#000'
					},

					onclick: function () {
						console.log(1);
					},

					ondrag: function () {
						console.log('拖拽按下并拖动了！');
					},
					ondragstart: function () {
						console.log('拖拽开始了（鼠标按下）！');
					},
					ondragend: function () {
						console.log('拖拽结束了（鼠标抬起）！');
					},
					ondragenter: function () {
						console.log('碰到我了！');
					},
					ondragleave: function () {
						console.log('碰撞离开了！');
					},
					ondragover: function () {
						console.log('ondragover');	//这个事件是有问题的
					},
					ondrop: function () {
						console.log('拖拽元素拖到我身上了，并在我身上抬起了鼠标！')
					}
				},
				{
					type: 'image',
					draggable: true,
					style: {
						image: 'http://echarts.baidu.com/images/favicon.png',
						width: 50,
						height: 50,
					},
				},
				{
					//文本块
					type: 'text',
					left: 'center',
					top: 'center',
					style: {
						text: '横轴表示温度，单位是°C\n纵轴表示高度，单位是km\n右上角有一个图片做的水印\n这个文本块可以放在图中各\n种位置',
						font: 'bold 16px Microsoft YaHei',
						fill: 'red',

						stroke: 'blue',
						lineWidth: 5,
						shadowBlur: 10,
						shadowOffsetX: 10,
						shadowOffsetY: 10,
						shadowColor: '#000',
					}
				},
				{
					//矩形
					type: 'rect',
					shape: {
						width: 100,
						height: 100,
						x: 100,
						y: 200,
					},
					style: {
						fill: 'rgba(15,186,100,0.5)',
						stroke: 'blue',
						lineWidth: 5,
						shadowBlur: 10,
						shadowOffsetX: 10,
						shadowOffsetY: 10,
						shadowColor: '#000',
					}
				},
				{
					//圆
					type: 'circle',
					z: 5,
					shape: {
						cx: 330,
						cy: 250,
						r: 100,
					},
					style: {
						fill: 'rgba(15,186,100,0.5)',
						stroke: 'blue',
						lineWidth: 5,
						shadowBlur: 10,
						shadowOffsetX: 10,
						shadowOffsetY: 10,
						shadowColor: '#000',
					}
				},
				{
					//圆环
					type: 'ring',
					shape: {
						cx: 170,
						cy: 450,
						r: 100,
						r0: 50,
					},
					style: {
						fill: 'rgba(15,186,100,0.5)',
						stroke: 'blue',
						lineWidth: 5,
						shadowBlur: 10,
						shadowOffsetX: 10,
						shadowOffsetY: 10,
						shadowColor: '#000',
					}
				},
				{
					//扇形
					type: 'sector',
					shape: {
						cx: 450,
						cy: 450,
						r: 100,
						r0: 50,
						startAngle: Math.PI / 180 * 0,	//开始弧度
						endAngle: Math.PI / 180 * 180,		//结束弧度
						clockwise: true,
					},
					style: {
						fill: 'rgba(15,186,100,0.5)',
						stroke: 'blue',
						lineWidth: 5,
						shadowBlur: 10,
						shadowOffsetX: 10,
						shadowOffsetY: 10,
						shadowColor: '#000',
					}
				},
				{
					//圆弧
					type: 'arc',
					shape: {
						cx: 600,
						cy: 340,
						r: 100,
						r0: 50,
						startAngle: Math.PI / 180 * 0,	//开始弧度
						endAngle: Math.PI / 180 * 180,		//结束弧度
						clockwise: true,
					},
					style: {
						fill: 'rgba(15,186,100,0.5)',
						stroke: 'blue',
						lineWidth: 5,
						shadowBlur: 10,
						shadowOffsetX: 10,
						shadowOffsetY: 10,
						shadowColor: '#000',
					}
				},
				{
					//多边形
					type: 'polygon',
					shape: {
						points: [[230, 630], [130, 780], [230, 780]],
						smooth: 'spline',
						smooth: 0.4,
					},
					style: {
						fill: 'rgba(15,186,100,0.5)',
						stroke: 'blue',
						lineWidth: 5,
						shadowBlur: 10,
						shadowOffsetX: 10,
						shadowOffsetY: 10,
						shadowColor: '#000',
					}
				},
				{
					//折线
					type: 'polyline',
					z: 5,
					shape: {
						points: [[430, 630], [330, 780], [430, 780]],
						smooth: 'spline',
						smooth: 1,
					},
					style: {
						//fill: 'rgba(15,186,100,0.5)',
						stroke: 'blue',
						lineWidth: 10,
						shadowBlur: 10,
						shadowOffsetX: 10,
						shadowOffsetY: 10,
						shadowColor: '#000',
					}
				},
				{
					//直线
					type: 'line',
					z: 5,
					shape: {
						x1: 930,
						y1: 40,
						x2: 660,
						y2: 270,
						percent: 0.5,
					},
					style: {
						//fill: 'rgba(15,186,100,0.5)',
						stroke: 'blue',
						lineWidth: 3,
						shadowBlur: 10,
						shadowOffsetX: 10,
						shadowOffsetY: 10,
						shadowColor: '#000',
					}
				},
				{
					//贝塞尔曲线
					type: 'bezierCurve',
					z: 5,
					shape: {
						x1: 0,
						y1: 0,
						x2: 1120,
						y2: 460,
						cpx1: 260,
						cpy1: 450,
						cpx2: 860,
						cpy2: 50,
					},
					style: {
						//fill: 'rgba(15,186,100,0.5)',
						stroke: 'pink',
						lineWidth: 5,
					}
				},
				{
					type: 'group',
					rotation: Math.PI / 180 * 45,
					right: 220,
					bottom: 220,
					bounding:'raw',

					children: [
						{
							//方块
							type: 'rect',
							left: 'center',
							top: 'center',
							z:100,
							shape: {
								width: 800,
								height: 100,
							},
							style: {
								fill: 'rgba(0,0,0,0.3)',
							}
						},
						{
							//文本
							type: 'text',
							left: 'center',
							top: 'center',
							z:100,
							style: {
								text: '作者：陈学辉',
								fill:'#fff',
								font:'bold 30px Microsoft YaHei',
							}
						}
					]
				}
			],
		});


		var btn = document.querySelector('button');
		btn.onclick = function () {
			mychart.setOption({
				graphic: [
					{
						id: 'favicon',
						$action: 'remove',
						style: {
							width: 300,
							height: 300,
							image: 'http://echarts.baidu.com/images/favicon.png',
						}
					}
				]
			});
		};

		mychart.on('click', function (params) {
			console.log(params.info);
		});
	</script>
</body>

</html>